document.addEventListener("DOMContentLoaded", function() {
    const topImage = document.querySelector('.top-image');
    const bottomImage = document.querySelector('.bottom-image');

    // 非线性放大动画
    topImage.style.transition = 'transform 3s cubic-bezier(0.165, 0.84, 0.44, 1)';
    topImage.style.transform = 'scale(1)';
    topImage.style.opacity = '1';

    // 在放大动画完成后开始上下摆动动画
    topImage.addEventListener('transitionend', function() {
        this.style.animation = 'tilt 3s infinite';
    });

    // 淡入动画
    setTimeout(() => {
        bottomImage.style.transition = 'opacity 5s ease-in';
        bottomImage.style.opacity = '0.7';
    }, 600); // 等待上图动画开始后的一段时间再启动下图动画
});